<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app" :style="[styleObject, styleObject2]">
    <p >{{msg}}</p>
    <p >{{details()}}</p>
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
    <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>

    <li v-for="n in evenNumbers">{{ n }}</li>

    <button @click="reverseMsg">反转字符串</button>
    <br/>
    <button @click="greet">Greet</button>
    <br/>
    <button @click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
    <br/>
    <input v-model.lazy="hahaha" placeholder="edit me" type="number">
    <p>Message is: {{ hahaha }}</p>
    <br/>
    <button-counter></button-counter>
    <br/>

    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += $event"
        ></blog-post>
    </div>
    <custom-input v-model="searchText"></custom-input>
    <p>searchText is: {{ searchText }}</p>
    <alert-box>
        Something bad happened.
    </alert-box>
</div>


    <script type="text/javascript">
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        });
        Vue.component('blog-post', {
            props: ['post'],
            template:
                '<div class="blog-post">' +
                '<h3>{{ post.title }}</h3>' +
                '<button v-on:click="$emit(\'enlarge-text\', 0.1)">加大字号</button>' +
                '<div v-html="post.content"></div>' +
                '</div>'
        });
        Vue.component('custom-input', {
            props: ['value'],
            template:'<input\n' +
                '      v-bind:value="value"\n' +
                '      v-on:input="$emit(\'input\', $event.target.value)"\n' +
                '    >'
        });
        Vue.component('alert-box', {
            template: '<div class="demo-alert-box">\n' +
                '      <strong>Error!</strong>\n' +
                '      <slot></slot>\n' +
                '    </div>'
        })

        var vm = new Vue({
            el: '#app',
            data: {
                textContent: {
                    color: 'white',
                    fontSize: '13px',
                },
                styleObject2: {
                    background:'blue',
                },
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ],
                msg: "菜鸟教程",
                hahaha: "",
                ok:false,
                numbers: [ 1, 2, 3, 4, 5 ],
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
                ],
                postFontSize: 1,
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            },
            methods: {
                details: function() {
                    return  this.msg + " - 学的不仅是技术，更是梦想！";
                },
                reverseMsg:function(){
                    return this.msg = this.msg.split('').reverse().join('')
                },
                greet: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    alert('Hello ' + this.msg + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName+ "点击的")
                    }
                },
                warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) event.preventDefault()
                    alert(message)
                }
            }
        })
    </script>
</body>
</html>